<template>
    <view class="pos-a r0 t0 b0 flcc flex-fill" :style="style" :class="anmi">
		<slot class="flex1"></slot>
	</view>
</template>
<!-- 
使用案例：
ref="mySlideBox" 为固定属性
<sslide ref="mySlideBox"></sslide>

父容器方法
@tap="mySlide(index)" 
-->
<script>
    export default {
        name: "sslide",
        data() {
            return {
                showStatus:false,
				anmi: '',
				style: 'transform: translateX(98%);',
            }
        },
        methods: {
           showSlide(){
			   this.style='transform: translateX(0%);'
			   this.anmi = "animation-slide-right"
			   this.showStatus=true
			   setTimeout(()=>{
				   this.anmi = ""
			   },300)
		   },
	   
		  hideSlide(){
				this.anmi = "animation-slide-right animation-reverse"
			   this.showStatus=false
			   setTimeout(()=>{
			   		this.style='transform: translateX(98%);'	
					this.anmi = ""
			   },300)
		  }
        }
    }
</script>

<style>
    .cu-form-group .title {
    	min-width: calc(4em + 15px);
    }
</style>
